<template>
  <div class="base-container">
    <t-row>
      <t-col :span="12">
        <t-form ref="form" :data="queryParams" label-width="80" @reset="onReset" @submit="()=>{this.pagination.current=1;this.queryParams.pageNum=1;this.getList()}">

          <t-row style="border-bottom: 1px solid #E5E6EB;margin-bottom: 10px">
            <t-col :span="11" class="query-form-inline">
              <t-form-item label="登录名称" name="userName">
                <t-input
                  v-model="queryParams.userName"
                  clearable
                  placeholder="请输入用户名称"
                  style="width: 240px"
                />
              </t-form-item>
              <t-form-item label="真实姓名" name="nickName">
                <t-input
                  v-model="queryParams.nickName"
                  clearable
                  placeholder="请输入真实姓名"
                  style="width: 240px"
                />
              </t-form-item>
              <t-form-item label="单位" name="deptId">
                <t-tree-select  style="width: 240px" clearable filterable :treeProps="{keys: {value: 'id'}}" v-model="queryParams.deptId"
                                :data="deptOptions" placeholder="选择单位"></t-tree-select>
              </t-form-item>
<!--              <t-form-item label="手机号码" name="phonenumber">-->
<!--                <t-input-->
<!--                  v-model="queryParams.phonenumber"-->
<!--                  clearable-->
<!--                  placeholder="请输入手机号码"-->
<!--                  style="width: 240px"-->
<!--                />-->
<!--              </t-form-item>-->
            </t-col>
            <t-col :span="1" class="operation-container">
              <t-button theme="primary" type="submit">查询</t-button>
              <t-button theme="default" variant="outline" type="reset">重置</t-button>
            </t-col>
          </t-row>
        </t-form>
        <t-table
          rowKey="id"
          :data="data"
          :columns="columns"
          hover
          :pagination="pagination"
          :loading="dataLoading"
        >
        </t-table>
      </t-col>
    </t-row>
  </div>
</template>

<script>
import {
  listUser,
} from "@/api/system/user";


export default {
  name: "login-count-index",
  dicts: ["sys_normal_disable", "sys_user_sex"],
  components: {
  },
  data() {
    return {
      deptName: "",
      deptNameTreeValue:[],
      userId:0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: "",
        nickName: "",
        phonenumber: "",
        status: "",
        deptId: null,
        dateRange:[],
      },
      data: [],
      deptOptions: undefined,
      filterByText: null,
      columns: [
        // {
        //   colKey: "id",
        //   title: "用户编号",
        //   align: "center"
        // },
        {
          colKey: "userName",
          title: "登录名称",
          align: "center"
        },
        {
          colKey: "nickName",
          title: "真实姓名",
          align: "center"
        },
        {
          colKey: "dept.deptName",
          title: "单位",
          align: "center"
        },
        // {
        //   colKey: "phonenumber",
        //   title: "手机号",
        //   align: "center"
        // },
        {
          colKey: "loginCount",
          title: "登录次数",
          align: "center",
          width: 100
        },
        {
          colKey: "loginDate",
          title: "最后登录时间",
          align: "center",
        },
        // {
        //   colKey: "op",
        //   title: "操作",
        //   align: "center",
        //   width:250
        // }
      ],
      dataLoading: false,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showPageSize: true,
        pageSizeOptions: [10, 20, 30, 50],
        showFirstAndLastPageBtn: false,
        onChange: (pageInfo) => {
          Object.assign(this.pagination,pageInfo)
          this.queryParams.pageNum = pageInfo.current || 1;
          this.queryParams.pageSize = pageInfo.pageSize;
          this.getList()
        },
      },
      dialog: {
        header: "",
        open_add_edit_user: false,
        open_reset_user_password: false,
        userId:0,
        userName:""
      }
    }
  },
  created() {
    this.getList();
    this.getTreeselect();
    // this.getTreeselectParty();
  },
  methods: {
    getList(){
      this.dataLoading = true;
      this.$api.system.user.selectUserListWithCount(this.queryParams).then(
        (res) => {
          this.data = res.rows;
          this.pagination.total = res.total;
          this.dataLoading = false;
        }).catch((e) => {
        this.dataLoading = false;
        this.$message.error(e.toString());
      });
    },
    onSubmit() {
      this.getList();
    },
    onReset(){
      this.queryParams.deptId = undefined;
      this.deptNameTreeValue = [];
      this.pagination.current = 1;
      this.getList();
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      this.$api.system.dept.treeSelect().then((res) => {
        this.deptOptions = res.data;
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
  }
}
</script>

<style lang="less" scoped>
</style>
